<template>
  <lay-menu
      :tree="true"
      :collapse="collapse"
      level
      :inverted="inverted"
      :theme="theme"
      :openKeys="openKeys"
      :selectedKey="selectedKey"
      @changeOpenKeys="changeOpenKeys"
      @changeSelectedKey="changeSelectedKey"
  >
    <Item :menus="menus" :teleportProps="{disabled: false}"></Item>
  </lay-menu>
</template>

<script lang="ts" setup>
import Item from "./item.vue";


interface MenuProps {
  collapse: boolean;
  selectedKey: string;
  openKeys: string[];
  menus: any[];
  theme: string;
  inverted: boolean;
}
withDefaults(defineProps<MenuProps>(), {
  collapse: false,
});
const emits = defineEmits(['changeOpenKeys', 'changeSelectedKey'])

const changeOpenKeys = (keys: string[]) => {
  emits("changeOpenKeys", keys);
}

const changeSelectedKey = (key: string) => {
  emits("changeSelectedKey", key);
};

</script>

<style>
.layui-nav-tree * {
  font-size: 14px;
}

.layui-nav-tree .layui-nav-item > a,
.layui-nav-tree.inverted .layui-nav-item > a {
  padding: 0 22px!important;
}

.layui-nav-tree.inverted .layui-this > a {
  padding: 3px 16px;
}

.layui-nav-tree .layui-nav-item > a > span {
  padding-left: 10px;
}

.layui-nav-tree .layui-nav-item > a .layui-nav-more {
  font-size: 12px !important;
  padding: 0 !important;
}


</style>
